<template>
    <div>
        <div class="top">
            <ul>
                <li>
                    <img src="../../assets/imges/奥迪.jpg" alt="">
                    <span>奥迪</span>
                </li>
                <li>
                    <img src="../../assets/imges/奔驰.jpg" alt="">
                    <span>奔驰</span>
                </li>
                <li>
                    <img src="../../assets/imges/宝马.jpg" alt="">
                    <span>宝马</span>
                </li>
                <li>
                    <img src="../../assets/imges/本田.jpg" alt="">
                    <span>本田</span>
                </li>
                <li>
                    <img src="../../assets/imges/极氪.jpg" alt="">
                    <span>极氪</span>
                </li>
                <li>
                    <img src="../../assets/imges/长安.jpg" alt="">
                    <span>长安</span>
                </li>
                <li>
                    <img src="../../assets/imges/红旗.jpg" alt="">
                    <span>红旗</span>
                </li>
                <li>
                    <img src="../../assets/imges/飞凡.jpg" alt="">
                    <span>飞凡</span>
                </li>
                <li>
                    <img src="../../assets/imges/吉利.jpg" alt="">
                    <span>吉利</span>
                </li>
                <li>
                    <img src="../../assets/imges/埃安.jpg" alt="">
                    <span>埃安</span>
                </li>
            </ul>
            <ul class="ul2">
                <li>
                    <img src="../../assets/imges/奥迪4.jpg" alt="">
                    <span>宝马3系</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪6.jpg" alt="">
                    <span>奥迪Q5L</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪4.jpg" alt="">
                    <span>奔驰GLC</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪6.jpg" alt="">
                    <span>宝马X1</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪4.jpg" alt="">
                    <span>凯迪拉克</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪6.jpg" alt="">
                    <span>雷克萨斯ES</span>
                </li>
            </ul>
        </div>
        <div class="center">
            <ul>
                <li>
                    <router-link :to="{ path: '/xinche/haohuapinpai/xiaoliang' }">销量排行</router-link>
                </li>
                <li>
                    <router-link :to="{ path: '/xinche/haohuapinpai/jiangjia' }">降价排行</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
        <div class="bottom">
            <div class="bk">
                <div class="z">
                    <h3>豪华品牌热门车型，必看!</h3>
                    <span class="gg">高端大气，实用好开，豪华品牌入门]首选系列。</span>
                </div>
                <div class="y">
                    <img src="../../assets/imges/精选车单.jpg" alt="">
                    <span>更多></span>
                </div>
            </div>
            <ul class="ul8">
                <li>
                    <img src="../../assets/imges/001.jpg" alt="">
                    <span>奔驰E级</span>
                    <p>最低成交价<span class="jj">3*.89万</span></p>
                    <span class="cz">车主成交价</span>
                </li>
                <li>
                    <img src="../../assets/imges/002.jpg" alt="">
                    <span>奔驰C级</span>
                    <p>最低成交价<span class="jj">2*.72万</span></p>
                    <span class="cz">车主成交价</span>
                </li>
                <li>
                    <img src="../../assets/imges/001.jpg" alt="">
                    <span>宝马5系</span>
                    <p>最低成交价<span class="jj">3*.00万</span></p>
                    <span class="cz">车主成交价</span>
                </li>
                <li>
                    <img src="../../assets/imges/002.jpg" alt="">
                    <span>奥迪A6L</span>
                    <p>最低成交价<span class="jj">3*.80万</span></p>
                    <span class="cz">车主成交价</span>
                </li>
                <li>
                    <img src="../../assets/imges/001.jpg" alt="">
                    <span>奥迪A4L</span>
                    <p>最低成交价<span class="jj">2*.90万</span></p>
                    <span class="cz">车主成交价</span>
                </li>
                <li>
                    <img src="../../assets/imges/002.jpg" alt="">
                    <span>奥迪Q3</span>
                    <p>最低成交价<span class="jj">1*.90万</span></p>
                    <span class="cz">车主成交价</span>
                </li>
                <li class="li9">
                    查看更多
                </li>
            </ul>
        </div>

        <van-index-bar>
            <van-index-anchor index="A" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="B" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="C" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="D" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="E" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="F" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>
        </van-index-bar>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div {
    .top {
        width: 94%;
        margin-left: 3%;
        background-color: white;
        border-radius: 15px;
        font-size: 30px;
        margin-top: 20px;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                width: 20%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-top: 10px;

                img {
                    width: 130px;
                }
            }
        }

        .ul2 {
            // width: 100%;
            // overflow: auto;
            flex-wrap: nowrap;
            overflow: scroll;

            li {
                width: 30%;

                img {
                    width: 200px;
                }
            }
        }

        .ul2::-webkit-scrollbar {
            display: none;
        }
    }

    .center {
        margin-top: 30px;
        padding: 20px 10px;
        width: 94%;
        margin-left: 3%;
        background-color: white;

        ul {
            display: flex;
            font-size: 35px;
            border-radius: 15px;
            li {
                margin-right: 20px;

                a {
                    color: black;
                }

                .router-link-active {
                    font-size: 38px;
                    font-weight: bold;
                }
            }
        }
    }
    .bottom{
        width: 94%;
        margin: 25px 0px;
        padding: 15px 0px;
        margin-left: 3%;
        font-size: 30px;
        background-color: white;
        border-radius: 15px;
        .bk{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .z{
                .gg{
                    font-size: 24px;
                }
            }
            .y{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 150px;
                    margin-right: 10px;
                }
            }
        }
        .ul8{
            display: flex;
            width: 98%;
            overflow: auto;
            font-size: 28px;
            li{
                background-color: #F6F7FB;
                margin: 10px;
                height: 320px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                border-radius: 15px;
                img{
                    width: 250px;
                }
                .jj{
                    color: red;
                }
                .cz{
                    background-color: #2865FC;
                    padding: 10px 15px;
                    border-radius: 12px;
                    color: white;
                }
            }
            .li9{
                padding: 0px 30px;
            }
        }
        .ul8::-webkit-scrollbar{
            display: none;
        }
    }


    .ul2 {
        font-size: 30px;
        width: 94%;
        margin-left: 3%;
        background-color: white;
        border-radius: 15px;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 100px;

            .left {
                display: flex;
                align-items: center;

                img {
                    width: 90px;
                }
            }
        }
    }
}
</style>